<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/index.css">

<style>
	*{
		padding: 0;
        margin: 0;
	}
	html, body, #app {
		width: 100%;
		height: 100%;
		font-size: 14px;
	}
	.el-container{
		width: 100%;
		height: 100%;
	}
	.el-header{
		width: 100%;
		padding: 0%;
		background-color: rgba(101, 159, 6, 0.8);
		position: relative;
	}
	.el-header span{
		font-size: 30px;
		font-family: '微软雅黑';
		line-height: 60px;
		position: relative;
		left: 38%;
	}
	.el-aside{
		padding: 0%;
		height: 100%;
	}
	.el-menu{
		height: 100%;
	}
	.el-main{
		padding: 0%;
	}
	iframe{
		width: 100%;
        height: 100%;
	}
	.a1{
		position: absolute;
		top: 40%;
		right: 12%;
	}
</style>
</head>
<body>
	<div id="app">

		<el-container>
			<!--头部-->
			<el-header><span>欢迎来到果蔬商场后台管理</span></el-header>
			<el-container>
				<!--左侧列表-->
				<el-aside width="200px">
					<el-menu default-active="2" :unique-opened="true" class="el-menu-vertical-demo" @select="toPage"
						background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
						<!--首页-->
						<el-submenu index="welcome">
							<template slot="title">
								<i class="el-icon-s-shop"></i>
								<span>首页</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="welcome">首页</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<!--用户管理-->
						<el-submenu index="user">
							<template slot="title">
								<i class="el-icon-user-solid"></i>
								<span>用户管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="user/show">用户显示</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<!--商品管理-->
						<el-submenu index="goods">
							<template slot="title">
								<i class="el-icon-menu"></i>
								<span slot="title">商品管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="goods/show">商品显示</el-menu-item>
								<el-menu-item index="goods/assess">商品评论</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<!--类别管理-->
						<el-submenu index="type">
							<template slot="title">
								<i class="el-icon-document"></i>
								<span slot="title">类别管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="type/index">类别管理</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<!--订单管理-->
						<el-submenu index="order">
							<template slot="title">
								<i class="el-icon-setting"></i>
								<span slot="title">订单管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="order/index">订单显示</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<!--数据统计-->
						<el-submenu index="blog">
							<template slot="title">
								<i class="el-icon-s-comment"></i>
								<span slot="title">博客管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="blog/show">博客文章管理</el-menu-item>
								<el-menu-item index="blog/type">博客类别管理</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<!--管理-->
						<el-submenu index="data">
							<template slot="title">
								<i class="el-icon-pie-chart"></i>
								<span slot="title">数据统计</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="data/show">营业统计</el-menu-item>
								<el-menu-item index="data/productdata">商品统计</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
					</el-menu>
				</el-aside>
				<!--内容部-->
				<el-main>
					<iframe :src="url"></iframe>
				</el-main>
			</el-container>
		</el-container>
		
		</div>

<script src="../js/vue.js"></script>
<script src="./js/index.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/qs.js"></script>
	
<script>
	let app = new Vue({
		el: '#app',
		data: {
			url: 'welcome.html'
		},
		methods: {
			toPage(page){
				this.url = page + '.html';
			}
		}
	});
</script>
</body>
</html>